<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" :with-header="false" class="demand_box" size='600px' @close="resetForm('addScriptSingleHzForm')">
        <div class="flexbox flexcolumn height_100">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">创建需求</span>
                <span class="icon_btn icon_btn_32" @click="resetForm('addScriptSingleHzForm')"><img src="../../assets/img/close_check.svg" alt=""></span>
            </div>
            <div class="demand_center flex">
                <el-form label-position="top" :model="addScriptSingleHzForm" size="medium" :hide-required-asterisk='true' ref="addScriptSingleHzForm" :rules="addScriptSingleHzRules" class="dialog_form">
                    <div class="form_box">
                        <div class="flexbox flexcenter flexbetween">
                            <span class="font_14 color_02">脚本任务</span>
                        </div>
                        <el-form-item label="品牌/产品" prop="" style="margin-top:10px">
                            <el-row :gutter="12">
                                <el-col :span="12">
                                    <el-form-item prop="brand_id">
                                        <el-select v-model="brandSelect" placeholder="请选择品牌" value-key='brand_id' style="width:100%" @change="selectBrand">
                                            <el-option :label="item.brand_name+filters.chanelName(item.channel)" :value="item" v-for="item in brandList" :key="item.brand_id">
                                                <span>{{item.brand_name}}{{filters.chanelName(item.channel)}}</span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item prop="product_id">
                                        <el-select v-model="addScriptSingleHzForm.product_id" placeholder="请选择产品" style="width:100%" :disabled="!addScriptSingleHzForm.brand_id" @change="selectProduct">
                                            <el-option :label="item.name" :value="item.product_id" v-for="item in productList" :key="item.product_id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="业务场景" prop="business_scene">
                            <el-select v-model="addScriptSingleHzForm.business_scene" :disabled="!addScriptSingleHzForm.product_id" placeholder="请选择业务场景" style="width:100%">
                                <el-option :label="item.scene_name" :value="item.business_scene" v-for="item in sceneList" :key="item.business_scene"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="截止日期" prop="closing_date" style="margin-bottom:0">
                            <el-select v-model="addScriptSingleHzForm.closing_date" placeholder="请选择该需求的截止日期" style="width:100%">
                                <el-option label="周一" :value="1"></el-option>
                                <el-option label="周二" :value="2"></el-option>
                                <el-option label="周三" :value="3"></el-option>
                                <el-option label="周四" :value="4"></el-option>
                                <el-option label="周五" :value="5"></el-option>
                                <el-option label="周六" :value="6"></el-option>
                                <el-option label="周日" :value="7"></el-option>
                            </el-select>
                        </el-form-item>

                    </div>
                    <div class="form_box no_line" v-if="is_shot">
                        <div class="flexbox flexcenter flexbetween">
                            <span class="font_14 color_02">关联拍摄任务</span>
                            <div class="flexbox flexcenter">
                                <el-radio-group v-model="shotradio" @change="seletShot">
                                    <el-radio :label="1" style="margin-right:10px">默认</el-radio>
                                    <el-radio :label="2">填写</el-radio>
                                </el-radio-group>
                                <el-link type="danger" :underline="false" style="margin-left:16px;margin-top:-4px" @click="removeShot">移除</el-link>
                            </div>
                        </div>
                        <template v-if="shotradio==2">
                            <el-form-item prop="" style="margin-top:10px">
                                <el-row :gutter="12">
                                    <el-col :span="12">
                                        <el-form-item label="执行人" prop="executor_uid_shoot">
                                            <el-select v-model="addScriptSingleHzForm.executor_uid_shoot" multiple collapse-tags placeholder="请选择执行人" style="width:100%">
                                                <el-option :label="item.nickname" :value="item.id" v-for="item in hzUserList" :key="item.id"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="拍摄" prop="photographer_uid_shoot">
                                            <el-select v-model="addScriptSingleHzForm.photographer_uid_shoot" placeholder="请选择拍摄" style="width:100%">
                                                <el-option :label="item.nickname" :value="item.id" v-for="item in hzShotList" :key="item.id"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item prop="" style="margin-bottom:0">
                                <el-row :gutter="12">
                                    <el-col :span="12">
                                        <el-form-item label="编导" prop="director_uid_shoot">
                                            <el-select v-model="addScriptSingleHzForm.director_uid_shoot" placeholder="请选择编导" style="width:100%">
                                                <el-option :label="item.nickname" :value="item.id" v-for="item in hzEditList" :key="item.id"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="截止日期" prop="closing_date_shoot">
                                            <el-select v-model="addScriptSingleHzForm.closing_date_shoot" placeholder="请选择截止日期" style="width:100%">
                                                <el-option label="周一" :value="1"></el-option>
                                                <el-option label="周二" :value="2"></el-option>
                                                <el-option label="周三" :value="3"></el-option>
                                                <el-option label="周四" :value="4"></el-option>
                                                <el-option label="周五" :value="5"></el-option>
                                                <el-option label="周六" :value="6"></el-option>
                                                <el-option label="周日" :value="7"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                        </template>
                    </div>
                    <div class="form_box no_line" v-if="is_clip">
                        <div class="flexbox flexcenter flexbetween">
                            <span class="font_14 color_02">关联剪辑任务</span>
                            <div class="flexbox flexcenter">
                                <el-radio-group v-model="clipradio" @change="seletClip">
                                    <el-radio :label="1" style="margin-right:10px">默认</el-radio>
                                    <el-radio :label="2">填写</el-radio>
                                </el-radio-group>
                                <el-link type="danger" :underline="false" style="margin-left:16px;margin-top:-4px" @click="removeClip">移除</el-link>
                            </div>
                        </div>
                        <template v-if="clipradio==2">
                            <el-form-item prop="" style="margin-top:10px">
                                <el-row :gutter="12">
                                    <el-col :span="12">
                                        <el-form-item label="执行人" prop="executor_uid_clip">
                                            <el-select v-model="addScriptSingleHzForm.executor_uid_clip" multiple collapse-tags placeholder="请选择执行人" style="width:100%">
                                                <el-option :label="item.nickname" :value="item.id" v-for="item in hzUserList" :key="item.id"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="剪辑" prop="editor_uid_clip">
                                            <el-select v-model="addScriptSingleHzForm.editor_uid_clip" placeholder="请选择剪辑" style="width:100%">
                                                <el-option :label="item.nickname" :value="item.id" v-for="item in hzClipList" :key="item.id"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item prop="">
                                <el-row :gutter="12">
                                    <el-col :span="12">
                                        <el-form-item label="拍摄" prop="photographer_uid_clip">
                                            <el-select v-model="addScriptSingleHzForm.photographer_uid_clip" placeholder="请选择拍摄" style="width:100%">
                                                <el-option :label="item.nickname" :value="item.id" v-for="item in hzShotList" :key="item.id"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="截止日期" prop="closing_date_clip">
                                            <el-select v-model="addScriptSingleHzForm.closing_date_clip" placeholder="请选择截止日期" style="width:100%">
                                                <el-option label="周一" :value="1"></el-option>
                                                <el-option label="周二" :value="2"></el-option>
                                                <el-option label="周三" :value="3"></el-option>
                                                <el-option label="周四" :value="4"></el-option>
                                                <el-option label="周五" :value="5"></el-option>
                                                <el-option label="周六" :value="6"></el-option>
                                                <el-option label="周日" :value="7"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="编导" prop="director_uid_clip" style="margin-bottom:0" :rules="{ required: true, message: '请选择编导', trigger: ['blur', 'change']}">
                                <el-select v-model="addScriptSingleHzForm.director_uid_clip" placeholder="请选择编导" style="width:100%">
                                    <el-option :label="item.nickname" :value="item.id" v-for="item in hzEditList" :key="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </template>
                    </div>
                    <div>
                        <el-button type="primary" size="small" style="width:100%;margin-top:15px" plain icon="el-icon-circle-plus-outline" @click="addShotTask" v-if="!is_shot">关联拍摄任务</el-button>
                    </div>
                    <div>
                        <el-button type="primary" size="small" style="width:100%;margin-top:15px" plain icon="el-icon-circle-plus-outline" @click="addClipTask" v-if="!is_clip">关联剪辑任务</el-button>
                    </div>
                    <el-form-item label="" prop="quantity" style="margin-top:15px">
                        <el-input-number style="width:90px" v-model="addScriptSingleHzForm.quantity" controls-position="right" @change="handleChange" :min="1"></el-input-number>
                    </el-form-item>
                </el-form>
            </div>
            <div class="demand_footer flexbox flexcenter">
                <el-button plain size="small" class="el-button-width" @click="resetForm('addScriptSingleHzForm')">取 消</el-button>
                <el-button type="primary" size="small" class="el-button-width" @click="submitForm('addScriptSingleHzForm')" :loading="loading" :disabled='loading'>完成创建</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            is_shot: false,
            is_clip: false,
            brandSelect: {},
            clipradio: 2,
            shotradio: 2,
            brandList: [], //品牌列表
            productList: [], //产品列表
            sceneList: [], //业务场景列表
            optimiList: [], //优化师列表
            hzUserList: [], //杭州全部人员列表
            hzClipList: [], //杭州剪辑人员列表
            hzShotList: [], //杭州拍摄人员列表
            hzEditList: [], //杭州编导人员列表
            addScriptSingleHzForm: {
                year: "",
                week: "",
                brand_id: "",
                product_id: "",
                channel: "",
                business_scene: "",
                closing_date: "",
                quantity: "",
                //剪辑字段
                director_uid_clip: "",
                executor_uid_clip: [],
                editor_uid_clip: "",
                photographer_uid_clip: "",
                closing_date_clip: 5,
                //拍摄字段
                executor_uid_shoot: [],
                photographer_uid_shoot: "",
                closing_date_shoot: 5,
                director_uid_shoot: "",
            },
            addScriptSingleHzRules: {
                brand_id: [
                    {
                        required: true,
                        message: "请选择品牌",
                        trigger: "blur",
                    },
                ],
                product_id: [
                    {
                        required: true,
                        message: "请选择产品",
                        trigger: "blur",
                    },
                ],
                business_scene: [
                    {
                        required: true,
                        message: "请选择业务场景",
                        trigger: "blur",
                    },
                ],
                closing_date: [
                    {
                        required: true,
                        message: "请选择截止日期",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {
        this.$bus.on("addScriptSingleHz", (value) => {
            this.dialogVisible = value.dialogVsb;
            this.addScriptSingleHzForm.week = value.week;
            this.addScriptSingleHzForm.year = value.year;
            this.getBrandList();
            // this.getOptimization();
            this.gethzUserList();
            this.gethzClipList();
            this.gethzShotList();
            this.gethzEditList();
        });
    },
    beforeDestroy() {
        this.$bus.off("addScriptSingleHz");
    },
    methods: {
        //获取品牌列表
        async getBrandList() {
            const { data: res } = await this.$http.post(
                "adminapi/project/brandList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.brandList = res.data;
            }
        },

        // 获取产品
        async getProductList() {
            const { data: res } = await this.$http.post(
                "adminapi/project/productList",
                {
                    brand_id: this.addScriptSingleHzForm.brand_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.productList = res.data;
            }
        },

        // 获取业务场景
        async getSceneList() {
            const { data: res } = await this.$http.post(
                "adminapi/project/sceneList",
                {
                    brand_id: this.addScriptSingleHzForm.brand_id,
                    product_id: this.addScriptSingleHzForm.product_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.sceneList = res.data;
            }
        },

        // 获取优化师列表
        // async getOptimization() {
        //     const { data: res } = await this.$http.post(
        //         "adminapi/company/userList",
        //         {
        //             department: 0,
        //             page: 1,
        //             limit: 0,
        //             function: 0,
        //         }
        //     );
        //     if (res.code !== 200) {
        //         this.$message.error(res.msg);
        //         return;
        //     } else {
        //         this.optimiList = res.data.list;
        //     }
        // },

        // 获取杭州全部人员列表
        async gethzUserList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/hzUserList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.hzUserList = res.data;
            }
        },

        // 获取杭州剪辑人员列表
        async gethzClipList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/hzEditorList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.hzClipList = res.data;
            }
        },

        // 获取杭州拍摄人员列表
        async gethzShotList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/hzPhotographerList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.hzShotList = res.data;
            }
        },

        // 获取杭州编导人员列表
        async gethzEditList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/hzDirectorList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.hzEditList = res.data;
            }
        },

        //品牌选择
        selectBrand() {
            this.addScriptSingleHzForm.brand_id = this.brandSelect.brand_id;
            this.addScriptSingleHzForm.channel = this.brandSelect.channel;
            this.addScriptSingleHzForm.product_id = "";
            this.addScriptSingleHzForm.business_scene = "";
            this.getProductList();
        },

        // 产品选择
        selectProduct() {
            this.addScriptSingleHzForm.business_scene = "";
            this.getSceneList();
        },

        // 提交
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.loading = true;
                    const { data: res } = await this.$http.post(
                        "adminapi/demandhz/scriptAdd",
                        this.addScriptSingleHzForm
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.loading = false;
                        return;
                    } else {
                        this.$message({
                            message: "创建成功",
                            type: "success",
                        });
                        this.loading = false;
                        this.resetForm(formName);
                        this.$parent.getDataList(1);
                    }
                } else {
                    this.loading = false;
                    return false;
                }
            });
        },

        // 关联剪辑任务
        addClipTask() {
            this.is_clip = true;
        },
        removeClip() {
            this.is_clip = false;
            this.addScriptSingleHzForm.director_uid_clip = "";
            this.addScriptSingleHzForm.executor_uid_clip = [];
            this.addScriptSingleHzForm.editor_uid_clip = "";
            this.addScriptSingleHzForm.photographer_uid_clip = "";
            this.addScriptSingleHzForm.closing_date_clip = 5;
        },
        seletClip() {
            if (this.clipradio == 1) {
                this.addScriptSingleHzForm.director_uid_clip = "";
                this.addScriptSingleHzForm.executor_uid_clip = [];
                this.addScriptSingleHzForm.editor_uid_clip = "";
                this.addScriptSingleHzForm.photographer_uid_clip = "";
                this.addScriptSingleHzForm.closing_date_clip = 5;
            }
        },

        // 关联拍摄任务
        addShotTask() {
            this.is_shot = true;
        },
        removeShot() {
            this.is_shot = false;
            this.addScriptSingleHzForm.executor_uid_shoot = [];
            this.addScriptSingleHzForm.photographer_uid_shoot = "";
            this.addScriptSingleHzForm.director_uid_shoot = "";
            this.addScriptSingleHzForm.closing_date_shoot = 5;
        },
        seletShot() {
            if (this.shotradio == 1) {
                this.addScriptSingleHzForm.executor_uid_shoot = [];
                this.addScriptSingleHzForm.photographer_uid_shoot = "";
                this.addScriptSingleHzForm.director_uid_shoot = "";
                this.addScriptSingleHzForm.closing_date_shoot = 5;
            }
        },

        // 关闭重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.brandSelect = {};
            this.dialogVisible = false;
        },
    },
    components: {},
};
</script>

<style scoped>
.form_box {
    margin-top: 10px;
    padding: 20px 20px;
    border: 1px solid #ebebeb;
}
.no_line {
    border-top: 0;
    margin-top: 0;
}
</style>


